.box {
  display: flex;
  justify-content:space-between;
  width: 100%;
  height: 90%;
  padding: 10px;
}
.left {
  height: 90%;
  width: 25%;
  /* background-color: aqua; */
  display: flex;
  flex-flow:column
}
.right {
  width: 75%;
  height: 90%;
  display: flex;
  flex-flow:column
}
.left-top {
  height: 30%;
}
.left-mid {
  height: 30%;
  display: flex;
}
.left-bom {
  height: 30%;
}
.leftbox {
  margin-top: 20px;
}

.box1 {
  width: 90%;
  height: 70%;
  margin: auto;
}
.box1-top {
  width: 90%;
  height: 30%;
  margin: auto;
}
.box1-top-text {
  width: 100%;
  color: aliceblue;
  font-size: 30px;
  text-align: center;
  padding-top: 5px;
}
.box1-top-text2{
  width: 100%;
  color: aliceblue;
  font-size: 20px;
  text-align: left;
  padding-top: 5px;
}
.left-mid-text {
  color:white;
  width: 100%;
  height: 20%;
  text-align: center;
}


.right-top {
  width: 100%;
  height: 70%;
  /* background-color: tomato; */
  display: flex;
}
.right-bom {
  width: 100%;
  height: 30%;
  display: flex;
}

.right-top-left {
  width: 70%;
  height: 100%;
}
.right-top-right {
  width: 30%;
  height: 100%;
}
.borderBox8 {
  width: 100%;
  height: 100%;
}

.right-top-right-top {
  width: 100%;
  height: 50%;
}
.scrollRankingBoard {
  margin: auto;
}